<template>
  <div>
    <nut-popup position="bottom" closeable round :custom-style="{ height: '1000rpx' }" v-model:visible="show">
      <div pt-30rpx h-50rpx leading-50rpx text-center>发票信息</div>
      <nut-form ref="ruleForm" :model-value="submitData" :rules="rules">
        <nut-form-item label="发票类型" label-width="85">
          <div>
            <nut-radio-group v-model="type" direction="horizontal">
              <nut-radio shape="button" :label="item.id" v-for="(item, index) in invoiceType" :key="index" :disabled="item.disabled">
                {{item.title}}
              </nut-radio>
            </nut-radio-group>
            <div class="tips mt-10rpx">电子发票即电子增值税发票，是数据认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。</div>
          </div>
          
        </nut-form-item>
        <nut-form-item label="发票抬头" label-width="85">
          <nut-radio-group v-model="header" direction="horizontal">
            <nut-radio shape="button" :label="item.id" v-for="(item, index) in invoiceHeader" :key="index">
              {{item.title}}
            </nut-radio>
          </nut-radio-group>
        </nut-form-item>
        <nut-form-item label="个人名称" label-width="85" v-if="header === 1">
          <nut-input v-model="submitData.receiptTitle" class="nut-input-text" placeholder="请输入个人名称" type="text" />
        </nut-form-item>
        <nut-form-item label="单位名称" label-width="85" v-if="header === 2">
          <nut-input v-model="submitData.receiptTitle" class="nut-input-text" placeholder="请输入单位名称" type="text" />
        </nut-form-item>
        <nut-form-item label="纳税人识别号" label-width="85" v-if="header === 2">
          <nut-input v-model="submitData.taxpayerId" class="nut-input-text" placeholder="请输入纳税人识别号" type="text" />
        </nut-form-item>

        <nut-form-item label="发票信息" label-width="85">
          <nut-radio-group v-model="submitData.receiptContent" direction="horizontal">
            <nut-radio shape="button" :label="item.title" v-for="(item, index) in goodsType" :key="index">
              {{item.title}}
            </nut-radio>
          </nut-radio-group>
        </nut-form-item>
        <nut-form-item label="邮箱" label-width="85" >
          <nut-input v-model="submitData.email" class="nut-input-text" placeholder="请输入邮箱" type="text" />
        </nut-form-item>
        <div px-20rpx py-20rpx>
          <nut-button block type="primary" @click="submitInvoice">提交</nut-button>
        </div>
      </nut-form>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import * as TEST from '@/utils/test';
const props = defineProps<{
  res: any
}>()

const show = ref<boolean>(false);
const submitData = ref<any>({
  receiptTitle: "", // 发票抬头
  taxpayerId: "", // 纳税人
  receiptContent: "商品明细", // 发票信息
  email: "", // 邮箱
});
const rules: any = {};
const ruleForm = ref<any>();
// 发票类型
const invoiceType = ref<any>([
  {id: 1, title: "电子普通发票", active: true,},
  {id: 2, title: "增值税专用发票", active: false},
])
const type = ref<any>(1); // 发票类型
// 发票抬头
const invoiceHeader = ref<any>([
  {id: 1, title: "个人", active: false,},
  {id: 2, title: "单位", active: false,},
])
const header = ref<any>(1); // 发票抬头
// 商品类型
const goodsType = ref<any>([
  {title: "商品明细", active: false,},
  {title: "商品类别", active: false,},
])

const emit = defineEmits(['callbackInvoice'])

// 确定
function submitInvoice() {
  const { receiptTitle, taxpayerId, receiptContent, email } = submitData.value;
  if (TEST.default.isEmpty(receiptTitle)) {
    uni.showToast({
      title: '请您填写发票抬头!',
      icon: 'none'
    });
    return false;
  }
  if (TEST.default.isEmpty(taxpayerId) && header.value === 2) {
    uni.showToast({
      title: '请您填写纳税人识别号!',
      icon: 'none'
    });
    return false;
  }
  if (TEST.default.isEmpty(email)) {
    uni.showToast({
      title: '请您填写邮箱!',
      icon: 'none'
    });
    return false;
  }
  emit('callbackInvoice', submitData.value);
};


onMounted(() => {
  if (props.res) {
    submitData.value.receiptTitle = props.res.receiptTitle; // 发票抬头
    submitData.value.taxpayerId = props.res.taxpayerId; //纳税人
    submitData.value.receiptContent = props.res.receiptContent; // 发票信息
    props.res.receiptContent == "商品明细"? type.value = 1 : type.value = 2;
    props.res.taxpayerId? header.value = 1 : header.value = 2;
  } else {
    type.value = 1;
    header.value = 1;
  }
})

defineExpose({
  show,
})
</script>

<style>
page {
  --nut-radio-button-padding: 5px 14px;
}
</style>